<script>
export default {
  name: "LsdForm",
  props: {
    compData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    form: {
      type: Object
    }
  },
  data: function () {
    return {
      serchForm: {}
    };
  },
  methods: {
    formatter(item, keyWord) {
      if (item.formatter) {
        return item.formatter(this.form[item.id]);
      } else if (keyWord) {
        return this.serchForm[item.keyWord];
      } else {
        return this.form[item.id];
      }
    },
    checkOrgType(orgType, data, node, item) {
      const name = `${item.treeData.props.label}`;
      const value = `${item.treeData.props.value}`;
      let bz = "";
      let dep = "";
      let unit = "";
      let id = "";
      if (item.chooseUnit) {
        if (orgType !== "1") {
          if (orgType === "2") {
            dep = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            } else {
              dep = `${node.parent.data.orgName}${dep}`;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                }
              }
            }
          } else if (orgType === "3") {
            console.log(12);
            bz = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "2") {
              dep = node.parent.data.orgName;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                } else {
                  dep = `${node.parent.parent.parent.data.orgName}${dep}`;
                  if (node.parent.parent.parent.parent.data.orgType === "1") {
                    unit = node.parent.parent.parent.parent.data.orgName;
                  } else {
                    dep = `${node.parent.parent.parent.parent.data.orgName}${dep}`;
                  }
                }
              }
            } else if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            }
          }
        } else {
          unit = data.orgName;
          id = data.id;
        }
      } else {
        if (orgType !== "1") {
          if (orgType === "2") {
            dep = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            } else {
              dep = `${node.parent.data.orgName}${dep}`;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                }
              }
            }
          } else if (orgType === "3") {
            console.log(12);
            bz = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "2") {
              dep = node.parent.data.orgName;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                } else {
                  dep = `${node.parent.parent.parent.data.orgName}${dep}`;
                  if (node.parent.parent.parent.parent.data.orgType === "1") {
                    unit = node.parent.parent.parent.parent.data.orgName;
                  } else {
                    dep = `${node.parent.parent.parent.parent.data.orgName}${dep}`;
                  }
                }
              }
            } else if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            }
          }
        }
      }
      const orgConfig = {
        [name]: `${unit}${dep}${bz}`,
        [value]: id
      };
      return orgConfig;
    },
    generateRadio(item) {
      return (
        <div class={item.id} ref={item.id}>
          {item.radios &&
            item.radios.map((n, i) => {
              return (
                <el-radio
                  {...{
                    attrs: {
                      ...n,
                      value: this.form[item.id]
                    },
                    on: {
                      input: (val) => {
                        this.$set(this.form, item.id, val);
                        if (item.name) {
                          item.radios.map((m) => {
                            if (m.label === val) {
                              this.$set(this.form, item.name, m.value);
                            }
                          });
                        }
                      },
                      change: (val) => {
                        this.$emit("change", val);
                      }
                    }
                  }}
                >
                  {n.value}
                </el-radio>
              );
            })}
          {item.afterConf && (
            <div
              class={item.afterConf.id}
              {...{
                on: {
                  click: () => {
                    this.$emit(`${item.afterConf.id}-append-click`);
                  }
                }
              }}
            >
              {item.afterConf.text}
            </div>
          )}
        </div>
      );
    },
    // 返回el-input元素节点
    generateInput(item) {
      return (
        <el-input
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item),
              placeholder:
                item.attrs && item.attrs.placeholder
                  ? item.attrs.placeholder
                  : item.label
                    ? `请输入${item.label}`
                    : ""
            },
            on: {
              blur: (event) => {
                this.$emit("blur", event);
              },
              focus: (event) => {
                this.$emit("focus", event);
              },
              change: (value) => {
                this.$emit("change", value);
              },
              input: (val) => {
                this.$set(this.form, item.id, val);
              },
              clear: () => {
                this.$emit("blur");
              }
            }
          }}
        >
          {item.slotsObj && (
            <span
              class='input-slot'
              slot={item.slotsObj.slot}
              {...{
                style: {
                  ...item.slotsObj.style
                },
                attrs: {
                  ...item.slotsObj.attrs
                },
                on: {
                  click: () => {
                    this.$emit("click", item.slotsObj);
                  },
                  mouseover: () => {
                    this.$emit("mouseover", item.slotsObj);
                  }
                }
              }}
            >
              {item.slotsObj.img && <img src={item.slotsObj.img} />}
              {item.slotsObj.text}
            </span>
          )}
          {item.slotsSelect && this.generateSelect(item.slotsSelect)}
        </el-input>
      );
    },
    // 返回el-select元素节点
    generateSelect(item) {
      return (
        <div class={item.attrs.multiple ? "" : "isMultiple"}>
          <el-select
            ref={item.id}
            popper-append-to-body={false}
            slot={item.slot}
            {...{
              attrs: {
                ...item.attrs,
                value: this.formatter(item),
                placeholder:
                  item.attrs && item.attrs.placeholder
                    ? item.attrs.placeholder
                    : item.label
                      ? `请选择${item.label}`
                      : ""
              },
              on: {
                change: (value) => {
                  this.$emit("change", value, item);
                },
                input: (val) => {
                  this.$set(this.form, item.id, val);
                  if (item.name) {
                    let labelArr = [];
                    this.$set(this.form, item.name, val);
                    item.options.map((m) => {
                      if (item.attrs && item.attrs.multiple) {
                        val.find((n) => {
                          if (n === m.value) {
                            labelArr = [...labelArr, m.label];
                            this.$set(this.form, item.name, labelArr);
                          }
                        });
                      } else {
                        if (m.value === val) {
                          this.$set(this.form, item.name, m.label);
                        }
                      }
                    });
                  }
                },
                "visible-change": (show) => {
                  this.$emit("visible-change", show);
                },
                "remove-tag": (value) => {
                  this.$emit("remove-tag", value);
                },
                clear: () => {
                  this.$emit("clear");
                },
                blur: (event) => {
                  this.$emit("blur", event);
                },
                focus: (event) => {
                  this.$emit("focus", event);
                }
              }
            }}
          >
            {item.options &&
              item.options.map((options) => {
                return (
                  <el-option
                    {...{
                      attrs: {
                        ...options
                      }
                    }}
                  ></el-option>
                );
              })}
          </el-select>
        </div>
      );
    },
    // 返回el-cascader元素节点
    generateCascader(item) {
      return (
        <el-cascader
          ref={item.id}
          options={item.options}
          {...{
            attrs: {
              ...item.attrs,
              "show-all-levels": false,
              checkStrictly: true,
              placeholder:
                item.attrs && item.attrs.placeholder
                  ? item.attrs.placeholder
                  : item.label
                    ? `请选择${item.label}`
                    : ""
            },
            on: {
              change: (value) => {
                this.$emit("change", value);
              },
              input: (val) => {
                this.$set(this.form, item.id, val);
                if (item.name) {
                  let labelArr = [];
                  this.$set(this.form, item.name, val);
                  item.options.map((m) => {
                    if (item.attrs && item.attrs.multiple) {
                      val.find((n) => {
                        if (n === m.value) {
                          labelArr = [...labelArr, m.label];
                          this.$set(this.form, item.name, labelArr);
                        }
                      });
                    } else {
                      if (m.value === val) {
                        this.$set(this.form, item.name, m.label);
                      }
                    }
                  });
                }
              },
              "visible-change": (show) => {
                this.$emit("visible-change", show);
              },
              "expand-change": (value) => {
                this.$emit("expand-change", value);
              },
              blur: (event) => {
                this.$emit("blur", event);
              },
              focus: (event) => {
                this.$emit("focus", event);
              }
            }
          }}
        ></el-cascader>
      );
    },
    // 返回带el-tree树形结构的el-select元素节点
    generateSelectTree(item) {
      return (
        <el-select
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item),
              placeholder:
                item.attrs && item.attrs.placeholder
                  ? item.attrs.placeholder
                  : item.label
                    ? `请选择${item.label}`
                    : ""
            },
            on: {
              change: (value) => {
                this.$emit("change", value);
              },
              input: (val) => {
                this.$set(this.form, item.id, val);
              },
              "visible-change": (show) => {
                this.$emit("visible-change", show);
              },
              "remove-tag": (value) => {
                this.$emit("remove-tag", value);
              },
              clear: () => {
                this.$emit("clear");
              },
              blur: (event) => {
                this.$emit("blur", event);
              },
              focus: (event) => {
                this.$emit("focus", event);
              }
            }
          }}
        >
          <el-option
            style='height: auto'
            {...{
              attrs: {
                ...item.options.attrs
              }
            }}
          >
            {item.treeData &&
              (() => {
                return (
                  <el-tree
                    ref='tree'
                    {...{
                      attrs: {
                        ...item.treeData.attrs,
                        props: {
                          ...item.treeData.props
                        }
                      },
                      on: {
                        "node-click": (data, node, vueComponent) => {
                          this.$emit("node-click", data, node, vueComponent);
                        },
                        "node-contextmenu": (
                          event,
                          data,
                          node,
                          vueComponent
                        ) => {
                          this.$emit(
                            "node-contextmenu",
                            event,
                            data,
                            node,
                            vueComponent
                          );
                        },
                        "check-change": (
                          data,
                          currentNodesChecked,
                          hasChildNodesChecked
                        ) => {
                          this.$emit(
                            "check-change",
                            data,
                            currentNodesChecked,
                            hasChildNodesChecked
                          );
                        },
                        check: (data, checkedObj) => {
                          this.$emit("check", data, checkedObj);
                        },
                        "current-change": (data, node) => {
                          this.$emit("current-change", data, node);
                        },
                        "node-expand": (data, node, vueComponent) => {
                          this.$emit("node-expand", data, node, vueComponent);
                        },
                        "node-collapse": (data, node, vueComponent) => {
                          this.$emit("node-collapse", data, node, vueComponent);
                        },
                        "node-drag-start": (node, event) => {
                          this.$emit("node-drag-start", node, event);
                        },
                        "node-drag-enter": (dragNode, enterNode, event) => {
                          this.$emit(
                            "node-drag-enter",
                            dragNode,
                            enterNode,
                            event
                          );
                        },
                        "node-drag-leave": (dragNode, enterNode, event) => {
                          this.$emit(
                            "node-drag-leave",
                            dragNode,
                            enterNode,
                            event
                          );
                        },
                        "node-drag-over": (dragNode, enterNode, event) => {
                          this.$emit(
                            "node-drag-over",
                            dragNode,
                            enterNode,
                            event
                          );
                        },
                        "node-drag-end": (
                          dragNode,
                          enterNode,
                          dragNodePosition,
                          event
                        ) => {
                          this.$emit(
                            "node-drag-end",
                            dragNode,
                            enterNode,
                            dragNodePosition,
                            event
                          );
                        },
                        "node-drop": (
                          dragNode,
                          enterNode,
                          dragNodePosition,
                          event
                        ) => {
                          this.$emit(
                            "node-drop",
                            dragNode,
                            enterNode,
                            dragNodePosition,
                            event
                          );
                        }
                      }
                    }}
                  ></el-tree>
                );
              })}
          </el-option>
        </el-select>
      );
    },
    // 返回el-time-picker元素节点
    generateTimePicker(item) {
      return (
        <el-time-picker
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item),
              placeholder:
                item.attrs && item.attrs.placeholder
                  ? item.attrs.placeholder
                  : item.label
                    ? `请选择${item.label}`
                    : ""
            },
            on: {
              input: (val) => {
                this.$set(this.form, item.id, val);
              },
              change: (value) => {
                this.$emit("change", value);
              },
              blur: (vueComponent) => {
                this.$emit("blur", vueComponent);
              },
              focus: (vueComponent) => {
                this.$emit("focus", vueComponent);
              }
            }
          }}
        />
      );
    },
    // 返回el-date-picker元素节点
    generateDateTimePicker(item) {
      return (
        <el-date-picker
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item),
              placeholder:
                item.attrs && item.attrs.placeholder
                  ? item.attrs.placeholder
                  : item.label
                    ? `请选择${item.label}`
                    : ""
            },
            on: {
              input: (val) => {
                this.$set(this.form, item.id, val);
              },
              change: (value) => {
                this.$emit("change", value);
              },
              blur: (vueComponent) => {
                this.$emit("blur", vueComponent);
              },
              focus: (vueComponent) => {
                this.$emit("focus", vueComponent);
              }
            }
          }}
        />
      );
    },
    // 返回el-upload元素节点
    generateUpload(item) {
      return (
        <el-upload
          ref={item.id}
          {...{
            class: {
              "hidden-el-upload-btn":
                item.attrs["file-list"].length === item.attrs.limit
            },
            attrs: {
              ...item.attrs
            },
            on: {
              click: (val) => {
                this.$emit("click", val);
              }
            }
          }}
        >
          {item.attrs["list-type"] === "picture-card" && (
            <i class='el-icon-plus'></i>
          )}
          {item.btnData &&
            (item.attrs["list-type"] === "text" ||
              item.attrs["list-type"] === "picture") &&
            item.attrs["file-list"].length < item.attrs.limit && (
            <el-button
              {...{
                class: {
                  "el-button--img": item.btnData.img
                },
                attrs: {
                  ...item.btnData.attrs
                }
              }}
            >
              {item.btnData.img && (
                <span
                  class='button-inner'
                  style='display: flex; align-items: center'
                >
                  {item.btnData.img && <img src={item.btnData.img} />}
                  {item.btnData.text}
                </span>
              )}
              {!item.btnData.img && item.btnData.text}
            </el-button>
          )}
          {item.tip && (
            <div slot='tip' class='el-upload__tip'>
              {item.tip}
            </div>
          )}
        </el-upload>
      );
    },
    // 返回el-switch元素节点
    generateSwitch(item) {
      return (
        <el-switch
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item)
            },
            on: {
              input: (val) => {
                this.$set(this.form, item.id, val);
              },
              focus: (event) => {
                this.$emit("focus", event);
              },
              change: (value) => {
                this.$emit("change", value);
              }
            }
          }}
        ></el-switch>
      );
    },
    // 返回el-input-number元素节点
    generateInputNumber(item) {
      return (
        <el-input-number
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item),
              placeholder:
                item.attrs && item.attrs.placeholder
                  ? item.attrs.placeholder
                  : item.label
                    ? `请输入${item.label}`
                    : ""
            },
            on: {
              blur: (event) => {
                this.$emit("blur", event);
              },
              focus: (event) => {
                this.$emit("focus", event);
              },
              change: (currentValue, oldValue) => {
                this.$emit("change", currentValue, oldValue);
              },
              input: (val) => {
                this.$set(this.form, item.id, val);
              }
            }
          }}
        ></el-input-number>
      );
    },
    // 返回el-checkbox-group元素节点
    generateCheckbox(item) {
      return (
        <el-checkbox-group
          class='form-checkbox'
          ref={item.id}
          {...{
            attrs: {
              ...item.attrs,
              value: this.formatter(item)
            },
            on: {
              change: (val) => {
                this.$emit("change", val);
              },
              input: (val) => {
                this.$set(this.form, item.id, val);
              }
            }
          }}
        >
          {item.checkboxList &&
            item.checkboxList.map((m, i) => {
              return (
                <el-checkbox
                  {...{
                    attrs: {
                      ...m,
                      value: this.formatter(m)
                    },
                    on: {
                      change: (val) => {
                        this.$emit("change", val);
                      },
                      input: (val) => {
                        this.$set(this.form, item.id, val);
                      }
                    }
                  }}
                ></el-checkbox>
              );
            })}
        </el-checkbox-group>
      );
    },
    // 返回带el-tree树形结构的el-select元素节点加搜索功能
    generateLsdTree(item) {
      return (
        <div class='lsd-tree'>
          {
            <el-select
              ref={item.id}
              {...{
                attrs: {
                  ...item.attrs,
                  value: this.formatter(item),
                  "popper-append-to-body": false,
                  placeholder:
                    item.attrs && item.attrs.placeholder
                      ? item.attrs.placeholder
                      : item.label
                        ? `请选择${item.label}`
                        : ""
                },
                on: {
                  change: (value) => {
                    this.$emit("change", value);
                  },
                  input: (val) => {
                    this.$set(this.form, item.id, val);
                  },
                  "visible-change": (show) => {
                    this.$emit("visible-change", show);
                  },
                  "remove-tag": (value) => {
                    this.$emit("remove-tag", value);
                  },
                  clear: () => {
                    this.$emit("clear");
                  },
                  blur: (event) => {
                    this.$emit("blur", event);
                  },
                  focus: (event) => {
                    this.$emit("focus", event);
                  }
                }
              }}
            >
              <div class='lsdBox'>
                <div class='title'>
                  <span>{item.label}选择</span>
                  {
                    item.treeData.attrs["show-checkbox"] &&
                    <div class='lsdBoxTite' >

                      <div
                        style='cursor: pointer;userSelect: none'
                        {...{
                          on: {
                            click: () => {
                              this.$emit(
                                "handleTreeSelect",
                                this.$refs[item.treeRef].getCheckedNodes()
                              );
                              this.$refs[item.id].blur();
                            }
                          }
                        }}
                      >
                        确认
                      </div>
                      <div style='cursor: pointer;userSelect: none'
                        {...{
                          on: {
                            click: () => {
                              this.$emit(
                                "handleTreeSelectQ",
                                this.$refs[item.treeRef].setCheckedKeys([])
                              );
                              this.$refs[item.id].blur();
                            }
                          }
                        }}>取消</div>
                    </div>
                  }
                  <i
                    class='el-icon-close close'
                    {...{
                      on: {
                        click: () => {
                          // 弹窗关闭事件
                          this.$refs[item.id].blur();
                          this.serchForm[item.keyWord] = "";
                          // 调用el-tree过滤方法
                          this.$refs[item.treeRef].filter();
                        }
                      }
                    }}
                  ></i>
                </div>
                <div class='treeSerch'>
                  <el-input
                    {...{
                      attrs: {
                        placeholder: "输入关键字进行过滤",
                        // 仅对lsd-tree赋值
                        value: this.formatter(item, "keyWord")
                      },
                      on: {
                        input: (val) => {
                          // tree筛选
                          this.$set(this.serchForm, `${item.keyWord}`, val); // 给对应的keyWord赋值
                          this.$refs[item.treeRef].filter(val); // 执行树过滤方法
                        }
                      }
                    }}
                  ></el-input>
                </div>
                <el-option
                  style='height: auto'
                  {...{
                    attrs: {
                      ...item.options.attrs
                    }
                  }}
                >
                  <div class='treeList'>
                    <div class='treeStructure'>
                      {item.treeData && (
                        <el-tree
                          ref={item.treeRef}
                          {...{
                            attrs: {
                              "node-key": item.treeData.props.value,
                              ...item.treeData.attrs,
                              // 树结构过滤方法，可自定义
                              "filter-node-method": item.treeData.attrs[
                                "filter-node-method"
                              ]
                                ? item.treeData.attrs["filter-node-method"]
                                : (value, data) => {
                                  if (!value) return true;
                                  if (data[item.treeData.props.label]) {
                                    return (
                                      data[item.treeData.props.label].indexOf(
                                        value
                                      ) !== -1
                                    );
                                  }
                                },
                              props: {
                                ...item.treeData.props
                              }
                            },
                            on: {
                              "node-click": (data, node, vueComponent) => {
                                if (!item.treeData.attrs["show-checkbox"]) {
                                  if (item.commonClick) {
                                    if (item.isSplice) {
                                      console.log(data, "-----data");
                                      console.log(node, "-----node");
                                      const orgConfig = this.checkOrgType(data.orgType, data, node, item);
                                      if (orgConfig[item.treeData.props.label] !== "") {
                                        this.$set(this.form, `${item.id}`, orgConfig[item.treeData.props.label]);
                                        this.$set(this.form, `${item.name}`, orgConfig[item.treeData.props.value]);
                                      }
                                    } else {
                                      /* 判断是否能选单位 */
                                      if (item.filterUnit) {
                                        if (data.orgType !== "1") {
                                          this.$set(
                                            this.form,
                                            `${item.id}`,
                                            data[item.treeData.props.label]
                                          );
                                          this.$set(
                                            this.form,
                                            `${item.name}`,
                                            data[item.treeData.props.value]
                                          );
                                        } else {
                                          this.$set(
                                            this.form,
                                            `${item.id}`,
                                            ""
                                          );
                                          this.$set(
                                            this.form,
                                            `${item.name}`,
                                            ""
                                          );
                                        }
                                      } else {
                                        this.$set(
                                          this.form,
                                          `${item.id}`,
                                          data[item.treeData.props.label]
                                        );
                                        this.$set(
                                          this.form,
                                          `${item.name}`,
                                          data[item.treeData.props.value]
                                        );
                                      }
                                    }
                                  } else {
                                    this.$emit(
                                      "node-click",
                                      data,
                                      node,
                                      vueComponent
                                    );
                                  }
                                  this.$set(
                                    this.serchForm,
                                    `${item.keyWord}`,
                                    ""
                                  ); // 重置对应的keyWord
                                  if (item.isSplice) {
                                    if (data.orgType !== "1" && !item.chooseUnit) {
                                      this.$refs[item.treeRef].filter(""); // 执行树过滤方法
                                      this.$refs[item.id].blur();
                                    } else {
                                      this.$refs[item.treeRef].filter(""); // 执行树过滤方法
                                      this.$refs[item.id].blur();

                                    }
                                  } else {
                                    this.$refs[item.treeRef].filter(""); // 执行树过滤方法
                                    this.$refs[item.id].blur();
                                  }
                                }
                              },
                              "node-contextmenu": (
                                event,
                                data,
                                node,
                                vueComponent
                              ) => {
                                this.$emit(
                                  "node-contextmenu",
                                  event,
                                  data,
                                  node,
                                  vueComponent
                                );
                              },
                              "check-change": (
                                data,
                                currentNodesChecked,
                                hasChildNodesChecked
                              ) => {
                                this.$emit(
                                  "check-change",
                                  data,
                                  currentNodesChecked,
                                  hasChildNodesChecked
                                );
                              },
                              check: (data, checkedObj) => {
                                this.$emit("check", data, checkedObj);
                              },
                              "current-change": (data, node) => {
                                this.$emit("current-change", data, node);
                              },
                              "node-expand": (data, node, vueComponent) => {
                                this.$emit(
                                  "node-expand",
                                  data,
                                  node,
                                  vueComponent
                                );
                              },
                              "node-collapse": (data, node, vueComponent) => {
                                this.$emit(
                                  "node-collapse",
                                  data,
                                  node,
                                  vueComponent
                                );
                              },
                              "node-drag-start": (node, event) => {
                                this.$emit("node-drag-start", node, event);
                              },
                              "node-drag-enter": (
                                dragNode,
                                enterNode,
                                event
                              ) => {
                                this.$emit(
                                  "node-drag-enter",
                                  dragNode,
                                  enterNode,
                                  event
                                );
                              },
                              "node-drag-leave": (
                                dragNode,
                                enterNode,
                                event
                              ) => {
                                this.$emit(
                                  "node-drag-leave",
                                  dragNode,
                                  enterNode,
                                  event
                                );
                              },
                              "node-drag-over": (
                                dragNode,
                                enterNode,
                                event
                              ) => {
                                this.$emit(
                                  "node-drag-over",
                                  dragNode,
                                  enterNode,
                                  event
                                );
                              },
                              "node-drag-end": (
                                dragNode,
                                enterNode,
                                dragNodePosition,
                                event
                              ) => {
                                this.$emit(
                                  "node-drag-end",
                                  dragNode,
                                  enterNode,
                                  dragNodePosition,
                                  event
                                );
                              },
                              "node-drop": (
                                dragNode,
                                enterNode,
                                dragNodePosition,
                                event
                              ) => {
                                this.$emit(
                                  "node-drop",
                                  dragNode,
                                  enterNode,
                                  dragNodePosition,
                                  event
                                );
                              }
                            }
                          }}
                        ></el-tree>
                      )}
                    </div>
                  </div>
                </el-option>
              </div>
            </el-select>
          }
        </div>
      );
    }
  },
  render(h) {
    return (
      (this.compData.elType === "upload" &&
        this.generateUpload(this.compData)) ||
      (this.compData.elType === "input" && this.generateInput(this.compData)) ||
      (this.compData.elType === "select" &&
        this.generateSelect(this.compData)) ||
      (this.compData.elType === "cascader" &&
        this.generateCascader(this.compData)) ||
      (this.compData.elType === "selectTree" &&
        this.generateSelectTree(this.compData)) ||
      (this.compData.elType === "timePicker" &&
        this.generateTimePicker(this.compData)) ||
      (this.compData.elType === "dateTimePicker" &&
        this.generateDateTimePicker(this.compData)) ||
      (this.compData.elType === "radio" && this.generateRadio(this.compData)) ||
      (this.compData.elType === "inputNumber" &&
        this.generateInputNumber(this.compData)) ||
      (this.compData.elType === "checkbox" &&
        this.generateCheckbox(this.compData)) ||
      (this.compData.elType === "lsdTree" &&
        this.generateLsdTree(this.compData))
    );
  }
};
</script>

<style lang="less" scoped>
:deep(.el-textarea__inner) {
  font-family: ui-rounded;
}

:deep(.el-range-input) {
  font-size: 16px !important;
}

.isMultiple {
  :deep(.el-input__inner) {
    height: 35px !important;
    line-height: 35px !important;
  }

  :deep(.el-input__icon) {
    height: 35px !important;
    line-height: 35px !important;
  }
}

:deep(.el-icon-time:before) {
  font-size: 16px;
}

.lsd-tree {
  :deep(.el-popper) {
    margin-top: 0 !important;
  }

  :deep(.el-scrollbar__wrap) {
    overflow: hidden;
  }

  :deep(.el-select-dropdown__list) {
    padding: 0;
  }

  :deep(.popper__arrow) {
    display: none;
  }

  // :deep(.el-select-dropdown){
  //   left: 0 !important;
  // }
}

:deep(.el-popper) {
  max-height: 280px;
}

.lsdBox {
  height: 283px;
  position: relative;

  .lsdBoxTite {
    width: 50%;
    height: 29px;
    left: 25%;
    position: absolute;
    /* background-color: aquamarine; */
    color: blue;
    bottom: 10px;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    font-size: 15px;
  }


  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    background-color: #5b7df5;
    color: #fff;
    padding: 0 10px;
    font-weight: 700;
    box-sizing: border-box;
  }

  .treeSerch {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 27px;

    :deep(.el-input) {
      width: 90% !important;
      height: 30px;
    }

    :deep(.el-input__inner) {
      width: 95% !important;
      height: 30px !important;
      min-height: 30px !important;
      line-height: 30px !important;

      &::placeholder {
        // color: red;
        font-size: 14px !important;
      }
    }
  }

  .treeList {
    height: 138px;
    overflow-y: auto;

    .treeStructure {
      position: relative;
    }
  }

  :deep(.el-select-dropdown__item) {
    padding: 0 20px !important;
  }

  :deep(.el-cascader-node) {
    margin-bottom: 8px !important;
    padding-right: 0px !important;
  }

  :deep(.el-select-dropdown__wrap) {
    max-height: none;
  }

  :deep(.el-select-dropdown__item.hover, .el-select-dropdown__item:hover) {
    background-color: transparent;
  }

  :deep(.el-select-dropdown__list) {
    padding: 1px 0;
  }
}

:deep(.el-tree-node__label) {
  color: #606266 !important;
  font-weight: normal;
}
</style>
